<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
	<div class="row  border-bottom white-bg dashboard-header">
        <div class="col-sm-12">
            <p>ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。 <a href="http://echarts.baidu.com/doc/about.html" target="_blank">了解更多</a>
            </p>
            <p>ECharts官网：<a href="http://echarts.baidu.com/" target="_blank">http://echarts.baidu.com/</a>
            </p>

        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
<!--            <div class="col-sm-6">-->
<!--                <div class="ibox float-e-margins">-->
<!--                    <div class="ibox-title">-->
<!--                        <h5>柱状图</h5>-->
<!--                        <div class="ibox-tools">-->
<!--                            <a class="collapse-link">-->
<!--                                <i class="fa fa-chevron-up"></i>-->
<!--                            </a>-->
<!--                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
<!--                                <i class="fa fa-wrench"></i>-->
<!--                            </a>-->
<!--                            <ul class="dropdown-menu dropdown-user">-->
<!--                                <li><a href="#">选项1</a>-->
<!--                                </li>-->
<!--                                <li><a href="#">选项2</a>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                            <a class="close-link">-->
<!--                                <i class="fa fa-times"></i>-->
<!--                            </a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="ibox-content">-->

<!--                        <div class="echarts" id="echarts-bar-chart"></div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
	    $(function () {
            $.ajax({
                cache : true,
                type : "GET",
                url : ctx + "data/sh_point",
                async : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    console.log(data.data);
                    var date = [];
                    var price = [];
                    for (let i = 0; i < data.data.length; i++){
                        date.push(data.data[i].date);
                        price.push(data.data[i].openPrice);
                    }
                    var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                    option = {
                        xAxis: {
                            type: 'category',
                            data: date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data:price,
                            type: 'line'
                        }]
                    };
                    lineChart.setOption(option);
                    $(window).resize(lineChart.resize);
                }
            });

	
	    });
    </script>
</body>
</html>